<template>
    <div class="water">
        <!-- 顶端大图 -->
        <div class="topPic">
            <div>
                <div @click="back()" class="iconfont ret icon-fanhui"></div>
                <div class="top">
                    <img src="../../public/imgs/theTop8.jpg" />
                </div>
            </div>
        </div>
        <div class="picDown">
           <div class="msg">
                <div class="gradually"><h1 class="title">广州去哪儿看夜景</h1></div>
            <div class="memo">夜晚的羊城，独具一番魅力古诗中的白云晚望，都在这里但远不止这些！快来看TOP广州夜景</div>
          </div>
        </div>
        <div class="whiteLine"></div>
        <div class="fication">
            <div class="void"></div>
            <div class="viewItem">
                    <div>
                        <img src="../../public/imgs/thew1.jpg"/>
                    </div>
                    <div class="viewName">荔枝湾涌<span class="iconfont icon-icon_sanjiaoxing"></span></div>
                    <div class="introduct">昔日"十里红云，八桥画舫"，具有浓郁西关风情</div>
            </div>
            <div class="viewItem">
                    <div>
                        <img src="../../public/imgs/thew2.jpg"/>
                    </div>
                    <div class="viewName">珠江<span class="iconfont icon-icon_sanjiaoxing"></span></div>
                    <div class="introduct">江上可远观广州塔、沙面建筑群，乘船夜游</div>
            </div>
            <div class="viewItem">
                    <div>
                        <img src="../../public/imgs/thew3.jpg"/>
                    </div>
                    <div class="viewName">白鹅潭风情酒吧街<span class="iconfont icon-icon_sanjiaoxing"></span></div>
                    <div class="introduct">夜生活天堂，风格迥异演艺吧、西餐酒廊、清吧</div>
            </div>
            <div class="void"></div>
        </div>
    </div>
</template>

<script>
  export default {
    data(){
      return{
      }
    },
    methods:{
        back(){
            this.$router.go(-1)
        }
    }
  }
</script>

<style lang="less">
    .water{
        .whiteLine{
            height: 1px;
            background-color: white;
        }
        .gray{
            display: block;
            height: 10px;
            background: rgb(240, 242, 245);
            opacity: 0.6;
        }
        .topPic{
            position: relative;
            .ret{
                position: absolute;
                top: 10px;
                left: 10px;
                background: rgba(0, 0, 0, 0.3);
                padding: 10px;
                padding-left: 13px;
                color: white;
                border-radius: 50%;
            }
            .top{
                img{
                    width: 100%;
                    height: 360px;
                }
            }
        }
        .picDown{
            text-align: left;
            position: relative;
            top: 0;
            color: white;
            background: linear-gradient(rgba(111,151,132, 0), rgba(60,82,135,1) 140px);
            .msg {
                margin: 0 10px;
                border-bottom: 1px solid hsla(0,0%,100%,.15);
                .gradually {
                    padding: 5px;
                    flex-direction: column;
                    height: 200px;
                    display: flex;
                    margin-top: -200px;
                    justify-content: flex-end;
                }
                .memo {
                    padding: 10px 5px;
                    font-size: 16px;
                    color: #fff;
                    padding-bottom: 10px;
                }
            }
        }
        .fication{
            margin-top: -30px;
            background-color: rgba(60,82,135,1);
            .void{
                height: 30px;
            }
            .viewItem{
                text-align: left;
                margin: 30px;
                border-radius: 10px;
                background-color: white;
                img{
                    border-radius: 10px;
                    border-bottom-right-radius: 0;
                    border-bottom-left-radius: 0;
                    width: 100%;
                    height: 200px;
                }
                .viewName{
                    font-size: 18px;
                    padding: 10px 0 0 20px;
                    font-weight: bold;
                }
                .introduct{
                    padding: 5px 20px 10px 20px;
                    color: gray;
                    font-size: 14px;
                }
            }
        }
    }
</style>
